<template>
	<view id="withdraw-page">
		<view class="page-header">
			<view class="nav-header-tab active" style="width:100%">
				<view class="header-title">提现</view>
			</view>
		</view>

		<view class="page-content">
			<view class="withdraw-box">
				<view class="title">可提现本金({{merchantMoneyText}}) ：{{canMoney}}</view>
				<view class="input-box">
					<input class="input" type="text" v-model="canMoneyFocus" @input="onInputCanMoney" />
				</view>

                <view class="title">可提现佣金({{merchantMoneyText}}) ：{{comCanMoney}}</view>
                <view class="input-box">
                    <input class="input" type="text" v-model="comCanMoneyFocus" @input="onInputComCanMoney" />
                </view>
                <view class="balance">
                    <view class="detail-btn" @click="allCanMoney">全部提现</view>
                </view>

				<view class="balance">
					<view class="balance-num">提现金额({{merchantMoneyText}}) ：{{totalFocus}}</view>
					<view class="detail-btn" @click="toDetailPage">提现明细</view>
				</view>
                <view class="balance">
				    <view class="balance-num" >提现钱包：{{winthdrawType}}</view>
                </view>
				<button class="confirm-btn" :loading="loading" :disabled="loading" @click="show">提现</button>
			</view>
			<view class="explanation-box">
<!--				<view class="title">提现说明</view>-->
<!--				<view class="content">1.提现金额最低{{lowest}},最高{{highest}}</view>-->
<!--				<view class="content">2.当天提现额度{{dayMaxMoney}}，当天提现次数{{withdrewMaxNum}}次</view>-->
<!--				<view class="content">3.申请提现后会马上到您的微信或支付宝钱包</view>-->
<!--				<view class="content">4.提现打款至微信或支付宝钱包（需要已通过银行卡实名认证）</view>-->
<!--				<view class="content">5.默认 {{aliPayMin}}-{{aliPayMax}} 提现到支付宝钱包</view>-->
<!--				<view class="content">6.默认 {{wxPayMin}}-{{wxPayMax}} 提现到微信钱包</view>-->

        <view class="content" style="font-weight: 600;color: red">1.提现金额最低{{lowest}},最高{{highest}}</view>
        <view class="content" style="font-weight: 600;color: red">2.当天提现额度{{dayMaxMoney}}，当天提现次数{{withdrewMaxNum}}次</view>
        <view class="content" >3.如本佣金一起提现，到账金额为<span style="font-weight: 800;color: red">本佣金</span>总金额</view>
        <view class="content" >4.默认 <span style="font-weight: 800;color: red">{{aliPayMin}}-{{aliPayMax}} </span>提现到<span style="font-weight: 800;color: red">支付宝钱包</span></view>
        <view class="content" >5.默认 <span style="font-weight: 800;color: red">{{wxPayMin}}-{{wxPayMax}} </span>提现到<span style="font-weight: 800;color: red">微信钱包</span></view>
        <view class="content">6.申请提现后会马上到您的微信或支付宝钱包</view>
        <view class="content">7.提现打款至微信或支付宝钱包（需要已通过银行卡实名认证）</view>
			</view>
		</view>

    <view class="page-content">
      <div v-if="isShowConfirm" class="my-confirm">
        <div class="confirm-content-wrap" @click.stop>
          <h3 class="my-confirm-title">{{ titleText }}</h3>
          <view class="withdraw-box">
            <view class="balance">
              <view class="balance-num-at">提现类型：{{ contentType }}</view>
            </view>
            <view class="balance">
              <view class="balance-num-at">提现到账平台：{{ contentPlatfrom }}</view>
            </view>
            <view class="balance" v-if="winthdrawType == '支付宝'">
              <view class="balance-num-at">提现账号姓名：{{ aliname }}</view>
            </view>
            <view class="balance" v-if="winthdrawType == '支付宝'">
              <view class="balance-num-at">提现支付宝账号：{{ aliaccount }}</view>
            </view>
            <view class="balance">
              <view class="balance-num-at">提现金额：{{ contentMoney }}</view>
            </view>
          </view>

          <div class="my-operation">
            <div v-if="type==='confirm'" class="my-cancel-btn" @click="clickFun('clickCancel')">
              <p class="my-btn-text my-border-right">{{ cancelText }}</p>
            </div>

            <div v-if="succ==='alert'" class="confirm-btn" @click="clickFun('clickConfirm')">
              <p class="my-btn-text">{{ confirmText }}</p>
            </div>
          </div>
        </div>
      </div>
    </view>

	</view>
</template>

<script>
	import {
    allCommissionCapitalCash,
    pushAllWithdraw
	} from '../../../http/apis.js'

	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState(['token'])
		},
		data(){
			return {
        isShowConfirm: false, // 用于控制整个窗口的显示/隐藏
        titleText: '提现信息确认', // 提示框标题
        contentPlatfrom: '提现到账平台：', // 提示框的内容
        contentMoney:'提现金额：',// 提示框的内容
        contentType:'提现类型：',// 提示框的内容
        cancelText: '取消', // 取消按钮的文字
        confirmText: '确认', // 确认按钮的文字
        type: 'confirm', // 表明弹框的类型：confirm - 确认弹窗（没有取消按钮）
        succ: 'alert', // alert - 通知弹框（有确认按钮）
        outerData: null, // 用于记录外部传进来的数据，也可以给外部监听userBehavior，事件的函数提供判断到底是哪个事件触发的

				loading: false,
				bankStatus: 1,
				// wxStatus:1,
				// zfbStatus:1,
				// curClick: 'wx',
				withdrewType: 1,
				bankMinMoney: 0,
				bankMaxMoney: 0,
				lowest: 0,
				highest: 3,
				dayMaxMoney: 0,
				withdrawDayMaxMoneyed: 0,
				withdrawNum: 0,
				withdrewMaxNum: 0,
				canMoney: '0.00',// 可提现本金
				balance: '0.00', //余额
				money: '0.00', //提现金额,
        canMoneyFocus:'0.00',// 当前输入框本金
        comCanMoneyFocus:'0.00',// 当前输入框佣金
        totalFocus: '0.00', //当前输入框总金额
        comCanMoney:'0.00',// 可提现佣金
				moneyType: 1,
				merchantMoneyText: uni.getStorageSync('merchantMoneyText'),
				aliPayMax: '0.00', //支付宝上限
				wxPayMax: '0.00', //微信上限
				aliPayMin: '0.00', //支付宝下限
				wxPayMin: '0.00', //微信下限
				winthdrawType: '', //提现方式，微信|支付宝
				defaultPayType: '1', //1微信，2支付宝
				pushId: '',
        ali_is_bind: 0,
        aliaccount: '',
        aliname: ''
			}
		},
		onShow() {
			this.getInitData()
		},
		onLoad(options) {
			this.moneyType = options.type
		},
		methods:{
      show () {
        if(parseFloat(this.comCanMoneyFocus) > 0 && parseFloat(this.canMoneyFocus) > 0){
          this.contentType = '本佣金合并提现'
        }else if(parseFloat(this.comCanMoneyFocus) > 0){
          this.contentType = '佣金提现'
        }else if(parseFloat(this.canMoneyFocus) > 0) {
          this.contentType = '本金提现'
        }else{
          this.contentType = '提现金额填写出错'
          this.succ = ''
        }
        this.contentPlatfrom = this.winthdrawType == '' ? '无' : this.winthdrawType
        this.contentMoney = this.totalFocus +'元'
        this.isShowConfirm = true
      },
      hidden () {
        this.isShowConfirm = false
        this.titleText = '提现信息确认'
        this.cancelText = '取消'
        this.confirmText = '确认'
        this.type = 'confirm'
        this.succ = 'alert'
        this.outerData = null
      },
      clickFun (type) {
        if(type == 'clickConfirm'){
          this.confirm()
          this.hidden()
        }else{
          this.hidden()
        }
      },
      onInputCanMoney(e) {
          this.canMoneyFocus = e.detail.value
          this.totalFocus = this.numAdd(this.canMoneyFocus, this.comCanMoneyFocus)

          if (this.totalFocus > 0) {
              if (parseInt(this.totalFocus) >= parseInt(this.aliPayMin) && parseInt(this.totalFocus) < parseInt(this.aliPayMax)) {
                  this.winthdrawType = '支付宝'
                  return
              }
              if(parseInt(this.totalFocus) >= parseInt(this.wxPayMin) && parseInt(this.totalFocus) < parseInt(this.wxPayMax)) {
                  this.winthdrawType = '微信'
                  return
              }
              if(this.defaultPayType == '1') {
                  this.winthdrawType = '微信'
              }else{
                  this.winthdrawType = '支付宝'
              }
          }else{
              this.winthdrawType = ''
          }
      },
      onInputComCanMoney(e) {
          this.comCanMoneyFocus = e.detail.value
          this.totalFocus = this.numAdd(this.canMoneyFocus, this.comCanMoneyFocus)

          if (this.totalFocus > 0) {
              if (parseInt(this.totalFocus) >= parseInt(this.aliPayMin) && parseInt(this.totalFocus) < parseInt(this.aliPayMax)) {
                  this.winthdrawType = '支付宝'
                  return
              }
              if(parseInt(this.totalFocus) >= parseInt(this.wxPayMin) && parseInt(this.totalFocus) < parseInt(this.wxPayMax)) {
                  this.winthdrawType = '微信'
                  return
              }
              if(this.defaultPayType == '1') {
                  this.winthdrawType = '微信'
              }else{
                  this.winthdrawType = '支付宝'
              }
          }else{
              this.winthdrawType = ''
          }
      },
      getInitData(){
        allCommissionCapitalCash({
            token: this.token,
            // type: this.moneyType
          }).then(res =>{
              if(res.data.code == 1)  {
                  console.log(res.data);
                  this.balance = res.data.msg.money;
                  this.lowest = res.data.msg.min_money;
                  this.highest = res.data.msg.max_money
                  this.dayMaxMoney = parseInt(res.data.msg.day_max_money)
                  this.withdrawDayMaxMoneyed = parseInt(res.data.msg.withdrew_max_moneyed)
                  this.withdrawNum = parseInt(res.data.msg.withdrew_num)
                  this.withdrewMaxNum = parseInt(res.data.msg.withdrew_max)
                  this.bankMinMoney = res.data.msg.bank_min_money
                  this.bankMaxMoney = res.data.msg.bank_max_money
                  this.aliPayMin = res.data.msg.aliPaymin
                  this.aliPayMax = res.data.msg.aliPaymax
                  this.wxPayMin = res.data.msg.weChatPaymin
                  this.wxPayMax = res.data.msg.weChatPayMax
                  this.defaultPayType = res.data.msg.defaultType
                  this.pushId = res.data.msg.pushId
                  this.comCanMoney = res.data.msg.com_can_money
                  this.canMoney = res.data.msg.can_money
                  if (res.data.msg.ali_is_bind == true) {
                    this.ali_is_bind = 1
                    this.aliaccount = res.data.msg.aliaccount
                    this.aliname = res.data.msg.aliname
                  }else{
                    this.ali_is_bind = 0
                  }
              }
          })
      },
      allCanMoney(){
          if (this.canMoney == 0 && this.comCanMoney == 0) {
              this.$msg.showToast('当前没有可以全部提现的余额')
              return
          }
          this.canMoneyFocus = parseFloat(this.canMoney).toFixed(2)
          this.comCanMoneyFocus = parseFloat(this.comCanMoney).toFixed(2)
          this.totalFocus = this.numAdd(this.canMoneyFocus, this.comCanMoneyFocus)

          if (this.totalFocus > 0) {
              if (parseInt(this.totalFocus) >= parseInt(this.aliPayMin) && parseInt(this.totalFocus) < parseInt(this.aliPayMax)) {
                  this.winthdrawType = '支付宝'
                  return
              }
              if(parseInt(this.totalFocus) >= parseInt(this.wxPayMin) && parseInt(this.totalFocus) < parseInt(this.wxPayMax)) {
                  this.winthdrawType = '微信'
                  return
              }
              if(this.defaultPayType == '1') {
                  this.winthdrawType = '微信'
              }else{
                  this.winthdrawType = '支付宝'
              }
          }else{
              this.winthdrawType = ''
          }
      },
      /**
       * 加法运算，佣金和本金相加为用户本次提现总金额
       * @param num1
       * @param num2
       * @returns {number}
       */
      numAdd(num1, num2) {
          var baseNum, baseNum1, baseNum2;
          try {
              baseNum1 = num1.toString().split(".")[1].length;
          } catch (e) {
              baseNum1 = 0;
          }
          try {
              baseNum2 = num2.toString().split(".")[1].length;
          } catch (e) {
              baseNum2 = 0;
          }
          baseNum = Math.pow(10, Math.max(baseNum1, baseNum2));
          return (num1 * baseNum + num2 * baseNum) / baseNum;
      },
      toDetailPage(){
        uni.navigateTo({
          url: './withdrawRecord'
        })
      },
      confirm(){
          if(this.totalFocus == '0.00' || parseInt(this.totalFocus) < 0){
              this.$msg.showToast('当前没有余额可以提现')
              return
          }
          if(parseFloat(this.comCanMoneyFocus) < 0 || parseFloat(this.canMoneyFocus) < 0){
              this.$msg.showToast('金额填写错误')
              return
          }

          if (parseFloat(this.totalFocus) < parseFloat(this.lowest)) {
              this.$msg.showToast('提现金额最低' + this.lowest)
              return
          }
          if (parseFloat(this.totalFocus) > parseFloat(this.highest)) {
              this.$msg.showToast('提现金额最高' + this.highest)
              return
          }
          if (this.withdrawDayMaxMoneyed > this.dayMaxMoney) {
              this.$msg.showToast('当天提现额度已用完')
              return
          }
          if (this.withdrawNum > this.withdrewMaxNum) {
              this.$msg.showToast('当天提现次数已用完')
              return
          }
          if (this.ali_is_bind == 0) {
            this.$msg.showToast('请绑定支付宝后再进行操作')
            console.log('/pages/bindInfo/bindAlipayCode?type=2&pushId=' + this.pushId	+ '&aliIsBind=0')
            setTimeout(()=>{
              this.$router.push('/pages/bindInfo/bindAlipayCode?type=2&pushId=' + this.pushId	+ '&aliIsBind=0');
              // uni.navigateTo({
              //   url:'pages/bindInfo/bindAlipayCode?type=2&pushId=' + this.pushId	+ '&aliIsBind=0'
              // })
            },300)
            return
          }
          if(parseFloat(this.canMoneyFocus) > this.canMoney){
              this.$msg.showToast('本金不足')
              return
          }
          if(parseFloat(this.comCanMoneyFocus) > this.comCanMoney){
              this.$msg.showToast('佣金不足')
              return
          }
          uni.showLoading({
              title: '提交中'
          });
          this.loading = true
          pushAllWithdraw({
              token: this.token,
              canMoney: this.canMoney,// 可提现本金
              com_canMoney: this.comCanMoney,// 可提现佣金
              com_money: parseFloat(this.comCanMoneyFocus).toFixed(2),// 提现佣金
              money: parseFloat(this.canMoneyFocus).toFixed(2)// 提现本金
          }).then(res =>{
              uni.hideLoading()
              this.loading = false
              if(res.data.code == 1)  {
                  this.$msg.showToast(res.data.msg)
                  setTimeout(()=>{
                      uni.navigateTo({
                          url:'./withdrawRecord'
                      })
                  },2000)
              } else {
                  if (res.data.msg == '用户未绑定支付宝账号') {
                      uni.navigateTo({
                          url: '/pages/bindInfo/bindAlipayCode?type=2&pushId=' + this.pushId
                      });
                  }else{
                      this.$msg.showToast(res.data.msg)
                  }
              }
          }).catch(res => {
              uni.hideLoading()
              this.loading = false
              console.log(123)
              this.$msg.showToast(res.data.msg)
          })
      }
		}
	}
</script>

<style lang="scss">
	page{
		background: #f5f5f5;
	}
	#withdraw-page{
		.page-header {
			text-align: center;
			font-size: $font-base;
			border-bottom: $border-bottom-sm;
			padding-top: 10upx;
			background: #FFFFFF;
			.nav-header-tab {
				display: inline-block;
				width: 50%;
				text-align: center;
				border-bottom: 2px solid transparent;
				padding: 5px 0;
				&.active {
					border-bottom: 2px solid $theme-color;
					.header-title {
						color:$theme-color;
						padding: 20upx 0;
					}
				}
			}
			.header-title {

			}
			.header-tips {
				color: $font-color-disabled;
				margin-top: 10upx;
			}
		}
		.page-content {
			.withdraw-box {
				background: #FFFFFF;
				border-radius: 24upx;
				padding: 32upx;
				margin: 32upx;
				.title {
					font-size: 28upx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 40upx;
				}
				.input-box {
					border-bottom: 1px solid #e0e0e0;
					margin-top: 20upx;
					display: flex;
					align-items: center;
					padding-bottom: 30upx;
					.symbol {
						font-size: 46upx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #333333;
						line-height: 56upx;
					}
					.input {
						width: 80%;
						padding: 5px;
						vertical-align: bottom;
						flex: 1;
						font-size: 36upx;
					}
					.all-withdraw {
						font-size: 28upx;
						font-family: PingFang-SC-Medium, PingFang-SC;
						font-weight: 500;
						color: $theme-color;
						line-height: 24upx;
					}
				}
				.balance {
					display: flex;
					justify-content:space-between;

					margin-top: 32upx;
					.balance-num {
						font-size: 28upx;
						font-family: PingFang-SC-Medium, PingFang-SC;
						font-weight: 500;
						color: #666666;
						line-height: 28upx;
					}
          .all-withdraw {
            font-size: 28upx;
            font-family: PingFang-SC-Medium, PingFang-SC;
            font-weight: 500;
            color: $theme-color;
            line-height: 24upx;
          }
          .balance-num-at {
            font-size: 28upx;
            font-family: PingFang-SC-Medium, PingFang-SC;
            font-weight: 500;
            color: #666;
            line-height: 28upx;
          }
					.detail-btn {
						font-size: 28upx;
						font-family: PingFang-SC-Medium, PingFang-SC;
						font-weight: 500;
						color: $theme-color;
						line-height: 28upx;
					}
				}
				.confirm-btn {
					height: 80upx;
					line-height: 80upx;
					border-radius: 100upx;
					font-size: $font-lg;
					color: #fff;
					background: $theme-background-color;
					border-radius: 10upx;
					box-shadow: 1px 2px 5px $theme-color;
					margin: 60upx 32upx 30upx 32upx;
				}
			}
			.explanation-box {
				margin-top: 100upx;
				background: #FFFFFF;
				padding: 32upx;
				margin: 32upx;
				border-radius: 24upx;
				.title {
					font-size: 28upx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 28upx;
					margin-bottom: 28upx;
				}
				.content {
					font-size: 28upx;
					font-family: PingFang-SC-Medium, PingFang-SC;
					font-weight: 400;
					color: #999999;
					line-height: 44upx;
				}
			}
		}
	}

  .my-confirm {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 998;
    /* 这里防止当用户长按屏幕，出现的黑色背景色块，以及 iPhone 横平时字体的缩放问题 */
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }

  /* 进入和出去的动画 */
  .confirm-fade-enter-active {
    animation: opacity 0.3s;
  }
  .confirm-fade-enter-active .confirm-content-wrap {
    animation: scale 0.3s;
  }
  .confirm-fade-leave-active {
    animation: outOpacity 0.2s;
  }

  /* 包裹层容器样式 */
  .confirm-content-wrap {
    position: absolute;
    top: 28%;
    left: 0;
    right: 0;
    width: 280px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 5px;
    z-index: 999;
    user-select: none;
  }

  /* 顶部标题部分 */
  .my-confirm-title {
    padding-top: 20px;
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    color: #333;
  }

  /* 中间内容部分 */
  .my-confirm-content {
    padding: 0 15px;
    padding-top: 20px;
    margin-bottom: 32px;
    text-align: center;
    font-size: 16px;
    color: #666;
    line-height: 1.5;
  }

  /* 底部按钮样式 */
  .my-operation {
    display: flex;
    border-top: 1px solid #eee;
  }
  .my-operation .my-cancel-btn, .confirm-btn {
    flex: 1;
  }
  .my-operation .confirm-btn {
    color: #ffb000;
  }
  .my-operation .my-btn-text {
    text-align: center;
    font-size: 16px;
    margin: 14px 0;
    padding: 6px 0;
  }

  /* 其他修饰样式 */
  .my-border-right {
    border-right: 1px solid #eee;
  }

  /* 进来的动画 */
  @keyframes opacity {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes scale {
    0% {
      transform: scale(0);
    }
    60% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
  }
  /* 出去的动画 */
  @keyframes outOpacity {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

</style>
